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import 


void main() => runApp(MyApp()); 


TP 
>cu. 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code @ 


00:10 


WE) ta Tw ss MP | 
Menunjukan widget animated feature dan guna cara widget switch 

Dia on of 

Sebuah container dai akan merubah 

Jika dia on hijau off merah 

Animated bukan untuk container saja tapi bisa bermacam widget bisa text dan 
button 

On maka hijau 
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import 


void main() => runApp(MyApp()); 


pc. 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code @ 


emae oo 9B 


01:12 


Bagimana caranya 


Pakai stf karena ada animasi nya 

Appbar nya animated switch 

Body nya column mainaxis nya pasang spaceEvenly 
Children swich ini perlu ada nilai awal nya dia on atau off 
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extend 


build(E ntext context) { 
eturr r A 
home: $ 
appBa A ar(title: Text( 
body: Center( 
child: Column( 
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
Children: «W >[ 
wit ( 


) onChanged:y 
|, /"value: 
“activeColor: 
-activeThumbImage: Called when the user 
“activeTrackColor: 
> cu “dragStartBehavior: 
$ flutter run “inactiveThumbColor: 
“inactiveThumbImage: 
Your application code “inactiveTrackColor: . 
“key: 
exit code @ “materialTapTargets... 
Flutter stateful w.. 


toggles the switch on or 
off. 


02:42 
WE) (emir Exim] Sisik 


Oncahnge jika dikilik apa diubah 
Supaya nanti posisi nya berubah2 maka dicatat 
Kasih bool pertama nilai nya false 
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t build(E 
returr 
home: < 
appBar: 
body: 
child: lu 
mainAxisAlignment: MainAxisAlignme .spaceEvenly, 
children: «W >[ 


? tu 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code @ 


03:01 
INI pam Cat) SIS 


Swicth ini value nya ison 


14:09 


14:09 


Jika dia berubah maka kita buat anonoymous function () {} 
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context) { 


home: S$ 
appBar: 
body: Ce 
child: 
The argument type ‘Null Function()' can't be assigned to the 
parameter type ‘void 
Function(bool)' . 


24 onChanged: (|) {}, 
) 


pu. 
$ flutter run 


Your application code is in .\lib\main.dart. 


exit code @ 


" oa) il) Fisik — 
Disini nilia value barunya 

Jika dapat maka satu buah method mengangi 

isOn ini ganti dgn nilai baru nya 

laluy setState 
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build(é 
returr r 
home: < 
appBar: 
title: 
), 
body: 
child: 
mainAxisAlignment: MainAxisAlignment.spaceEvenly 
children: «W >[ 
witch( 
value: isON, 
onChanged: (newValue) { 
isON = newValue; 
setState(() {}); 


}, 


` 


Launching lib\main.dart on RNE L22 in debug mode... 
Built build\app\outputs\apk\debug\app-debug. apk. 


1) amon Cm SSZ pe 
Jika klik bisa ganti2 
Active colornya bisa ganti 
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> No Configur 
+ wana =p 
build(E ext context) { 
return Mater 
home: < 
appBar: 
package-flut} 
), Place the frd 
( children as 
ld: Cc first and last 
mainAxisAlignment: MainAxisA nment.spaceEvenl 
children: <Widget>[ 
witch( 
activeColor: ) .green, 
value: isON, 
onChanged: (newValue) ( 
isON = newValue; 
setState(() {}); 


-ausa s 


Launcnang 110\ma1n.aart ON KNE L44 In dedug mode... 

Built build\app\outputs\apk\debug\app-debug. apk. 

I/hwaps 29028): JNI_OnLoad 
zygote64(29028): Do partial code cache collection, code=30KB, data=2 
zygote64(29028): After code cache collection, code=30KB, data=2 
zygote64(29028): Increasing code cache capacity to 12 


Reloaded 1 of 455 braries in 580ms. 


3. 


04:41 
WE) ee mp Ett 


Bisa juga pasang ini juga 
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> No Configur: 


child: lumn( 
mainAxisAlignment: MainA A . spaceEvenly 
children: <Widget>[ 
witch( 
activeColor: 
inactiveTrackColor: 
value: isON, 
onChanged: (newValue) 


isON = newValue; 
tall SAN 


/zZygoted4(2y028): ATTEr Code Cacne COLLECTION, Coae=30Ky, Gata-ZYkb 
ygote64(29028): Increasing code cache capacity to 128KB 
Reloaded 1 of 455 libraries in 580m 
Do partial cod che collection, code=54KB, data=4% 
I/zygote64( : After code cache collection, code=54KB, data=49KB 
I/zygote64(29028): Increasing c cache capacity to 256KB 


Reloaded 1 of ibraries in 


05:00 
TE) iem) (Eth 


Supaya seragam ijo sama merah bisa ganti juga disni 
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Ha Sasa 


( 


(“Animated Switcher"), 


child: ( 
mainAxisAlignment: .spaceEvenl 
children: « > 
( 
activeColor: -green, 
inactiveThumbColor: .red, 
inactiveTrackColor: -red[200], 
value: isON, 
onChanged: (newValue) { 
Almira 


1 VO Tuli COGe cacne COLLECLION, COGe=124K5, Gala=5>K6 


3): After code cache collection, code=117KB, data-70KB 


, code-118KB, d 
collection, code=11 


che capacity to 51 


In) me HMHE me Ol 
Maka bagus 

Jika sudah buat containe naimated switcher 

Didalm nya dia minta child yg akan diubah2 itu apa 

Child itu pasang myWldget 
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build( context) į 
returr 
home: 
appBar: ( 
title: ("Animated Switcher"), 
)s 
body: 
child: ( 
mainAxisAlignment: .spaceEvenly, 
children: « >[ 
( 


child: myWidget, 
», 
( 
activeColor: .green, 
inactiveThumbColor: .red, 


inactiveTrackColor: -red[200], 
value: isON, 


1 VO Tuli Coge cacne COLLECTION, COQ 


e cache collection, code-117KB, data 


che collection, 
64( 298 : d ache collection, 


te64(29025 s code cache capacity to 512KB 


m mi cw) (sisix «) ee 
Maka buat dulu disini 

Widget nya pertama buat container widht nya 200 height 100 

Lalu kasih decoration box kasih coilor dan border 
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Video 


createState() => 


isON = A 
myWidget = ( 
wid 200, height: 100, decoration: 
color: -red, 
border: -all(color: «black, width: 


build( context) { 
return 
home: 
appBar: ( 


L/ZYBOLEO4( 29028): VO TULL COGE Cacne COLLECTION, COge=124K8, GALA-BIKh 
/zygote64(29028): After code cache collection, code=117KB, data=70KB 
oaded 1 of 4 ibrarie 
ygote64 : Do a c on 118KB, data-76KB 
ygote64(2 ): Aft de cache collection, code=118KB, data-76KB 
ygote64(29028): Increasing code cache capacity to 512KB 


Reloaded 1 of 4 ibraries in 511ms. 


hoot cat} Ssisix Me i| 
Jika sudah maka kewabah lagi 
Perlu mengisi durasi untuk mengisi berapa lama berlangsung 
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+ vamaaers appoai . 
title: “Animated Switcher"), 
», 
body: 
child: 
mainAxisAlignment : .spaceEvenly, 
children: « >[ 
( 
child: myWidget, 
duration: (seconds: 1),| 
), 
( 
activeColor: .green, 
inactiveThumbColor: .red, 


inactiveTrackColor: -red[200], 


value: isON, 
onChanged: (newValue) { 
isON = newValue; 


1 VO Tuli COGe cacne COLLECTION, COQ LARO, Qa BKB 
I/zygote64(29028): After code cache collection, code=117KB, data=70KB 

Re ded 1 of 4 braries in 543ms. 

I/zygote64(29028): Do partial code cache collection, code=118KB, data=76KB 
/zygote : After code cache collection, code=118KB, data=76KB 
I/zygote64(29028) : sing code cache capacity to 512KB 


Reloaded 1 of 4 ibraries in 511ms. 


1 Gua Du Se me | 
Didalam setsate kita ubah kita cek 
Kalau isOn teryata true maka dijalan contoh ubah menjad text dahulu 
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> No Configurat 


setState(() { 
if (isON) 
myWidget = 

"Switch: ON", 

style: 
color: „green, 
fontWeight: .w700, 
fontSize: 20), 


Keioaaea 1 OT 4>> 11orarles > LAMS . 
DK(3@492): 2019-08-06 17:51:51.859 pthread create [1863714032] N3BRC18SingleThreadWor 
F/EffectsDK (30492 9-08-06 17:51:51.8 pthread create [1862931696] N3BRC18SingleThreadWorkerE 
F/EffectsDK (30492): 2019-0 17:51:5 9 pthread create [1861547248] N3BRC18SingleThreadWorkerE 
F/EffectsDK(38492): 20 8-06 17:51: 5 F pthread join [1863714032] N3BRC18SingleThreadWorkerE succeed 
F/EffectsDK (30492): @6 17:51:51. : pthread join [1862931696] N3BRC18SingleThreadWorkerE succeed 
F/EffectsDK (3049 : .902 pthread join [1861547248] RC18SingleThreadWorkerE succeed 


08:33 
VE) ee mp Eat 


1 


~ 


Ctrl+shift+f dulu biar rapi 


Lalu dibawah nya else kalau teryata false maka dia akan mengambarkan container 
lagi 
Kita copy saja 
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if (isON) 
myWidget 
"Switch: 
style: 
color: .green, 
fontWeight: .w700, 
fontsize 


myWidget 
width: 
height: 100, 
decoration: 


color: .red, 
border: -all(color: .black, width: 3)), 


})5 


1 


Ke1oagea 4 OT 455 L1OrarleS AN >14ms. 
F/EffectSDK (30492 2019-08-06 :51:51.859 FATAL: pthread_create [1863714 | N3BRC18SingleThreadWorkerE 
F/EffectsDK (30492): 2019-08 :51:51. FATAL: pthread create [1862931696] N3BRC18SingleThreadWorkerE 
SDK (30492 2019-08-0 :51:51.859 FATAL: pthread te [1861547248] N3BRC18SingleThr 
sctSDK (30492 2019-08-0 151:51. FATAL: pthread join [1863714032] N3BRC18SingleThreadWorkerE succeed 
DK (30492): 2019-08 BED FATAL: pthread join [1862 3BRC18SingleThreadWorkerE succeed 
DK (3849 2019-08 7:51: pthread join [1861547248] N3BRC18SingleThreadWor succeed 


09:00 14:09 
Ih rela Cait || 


Kalau on digambar jadi text kalau false jadi container merah 
Kita restart 


Maka sudah ada dia posisi off 
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+ mana mywiaget = 


style: 
color: 
fontWeig 
fontSiz 


els 
myWidget = Cor 
width: 
height: 106 
decoratio 
color: 
border: rder.all(color: 


Restarted application in 1,534ms 


Jika diklik maka berubah 
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+ auas mywiaget = 


myWidget 
width: 
height: 
decoration: 


Switch: ON 


color: Co .red, 


border: der.all(color: 


Restarted application in 1,534ms. 


09:35 14:09 


Ht) em SW Bs « ae 
Kalau dia gk mau naik turun2 kita bungkus sized box 
Bunkus lagi center agar di tengah 
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setState(() { 
if (isON) 
myWidget = 


.green, 
fontWeight: .w7@e, 
fontSize: 20), 


myWidget = 


Restarted application in 1,534ms. 


1) Mam calm Salz Me Ol 
untuk animasi bisa berganti2 gk Cuma fade ini fade out bisa ganti 

Disni ganti nmya pasang 

transtionBuilder diabutuh method 

disni buat dulu anonymous method juga 

dia akan method scaleTranstion ini butuh scale kasih dari animation lalu child baru 
kasih child 
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home: 
appBar: ( 
title: (“Animated S 
», 
body: ( 
child: ( 
mainAxisAlignment : .spaceEvenly, 
children: « >[ 
( 
child: myWidget, 
duration: (seconds: 1), 
transitionBuilder: (child, animation) => 
scale: animation, 


child: child, 


activeColor: 


tarted application in 1,499ms. 


i ann Se ABE 0 | 
Maka dilihat 
Maka dimengecil 
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home: 
appBar: ( 
title: (“Animated Switcher"), Animated Switches 
», 
body: 
child: ( 
mainAxisAlignment: .spaceEvenl 
children: « >[ 
( 
child: myWidget, 
duration: (seconds: 1), 
transitionBuilder: (child, animation) => 
scale: animation, 
child: child, 


», 
( 


+ Oa since activeColor: 


Restarted application in 1,499m 


Reloaded 1 of 455 librarie 
«merona 


11:59 
VE) (rel por Eat 


Bisa diganti rotate 
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> No Configurations "GP 
+ asus home: 


appBar: 
title: ("Animat 
», 
body: 
child: ( 
mainAxisAlignment : .spaceEvenly, 
children: « >[ 
( 
child: myWidget, 
duration: (seconds: 1), 
transitionBuilder: (child, animation) => 
turns: animation, 
child: child, 
), 
», 
( 
activeColor: 
tarted applic n in 1,499ms. 


Reloaded 1 of 455 libraries in 636ms. 


12:11 
ba Catt 


Lihat lagi 
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home: 
appBar: ( 
title: (“Animated Switcher”), 
», 
body: 
child: ( 
mainAxisAlignment: .spaceEvenl 
children: « >[ 
( 
child: myWidget, 
duration: (seconds: 1), 
transitionBuilder: (child, animation) => 
turns: animation, 
child: child, 


arted appli 
eloaded 1 of 
Reloaded 1 of 455 libraries in 561ms. 


i] ome Calti (Six « T| 
Jika diubah widget yg sama ini ubah container jadi text 

Kalau container ke container maka dgn key bertanda itu diganti 

Copy ubah menjadi gren 
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setState(() ( 
if (isON) 
myWidget 
width: 20¢ 
height: 100, 
decoration: ( 
color: green, 
border: -all(color: .black, width: 
); ( 


Restarted application in 1,499ms 


Reloaded 1 of libraries in 
Reloaded 1 of 455 libraries in 


Reloaded 1 of 455 libraries in 


1) Mam cat] (sisix me Ol 
Maka lihat 

Kalau tanpa key maka jelek berubah nya 

Maka kasih key 
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> No Configurat 
25 value: isON, 
onChanged: (newValue) { 
isON = newValue; 
setState(() { 
if (isON) 
myWidget = 
key 
width: 
height: 100, 
decoration: 
color: -green, 
border: .all(color: .black, width: 


Restarted applica n in 1,499m: 
Reloaded 1 of 455 libraries in 6ms. 
Reloaded 1 of 455 libraries in 561ms 


Reloaded 1 of 455 libraries in 540ms. 


+ memyonTs 


13:29 
WE) ee mp Eat 


Misalkan 1 
Disni juga 
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el 
myWidget 
key: 
width: 
height: 100 
decoration: 
color: .red, 


border: -all(color: 


n in 1,499ms. 
Reloaded 455 brar in 
Reloaded f 455 libraries in 
Reloaded 1 of 455 libraries in 


Reloaded 1 of 455 libraries in 


13:39 
WE) iem) att 
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> No Configurations "GP 


Animated Switcher 


myWidget 
key: 
width: 
height: 1 
decoration: 
color: .red, 
border: -all(color: 


Restarted appl 

Reloaded 1 of 455 

Reloaded 1 of 455 libraries in 561ms. 
Reloaded 1 of 45 t ies in 540ms. 
Reloaded 1 of 455 libraries in 512ms. 


13:43 
WE) ee mp Eat 


Maka ada animasi nya 
Itu animated switcher 


